<template>
  <div class="tiezi">
        <ul>
            <li>
                <div class="artitem"> 
                    <div class="middle">
                        <h2>{{ item.postTitle }}</h2>  
                        <van-icon name="ellipsis" size="30" @click="Show"/>
                        <van-action-sheet
                          v-model="show"
                          :actions="actions"
                          cancel-text="取消"
                          close-on-click-action
                          @cancel="onCancel"
                          @select="onSelect"
                        />
                        <br>
                        <span>{{ item.postContent }}</span>
                        <p>{{ item.postTime }}</p>
                    </div>
                  <hr>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
//导入删除帖子接口
import {deletePost} from '@/api/user'
import { mapState} from "vuex";
export default {
    data() {
    return {
        show: false,
        actions:[{ name: '删除帖子' },{name:'查看详情'}],
    };
},
props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },
  computed: {
    //获取存储数据
  ...mapState('user',["userInfo"])
},
methods:{
    Show(){
        this.show=true
    },
    onCancel() {
     this.$toast('取消')
    },
    onSelect(item) {
        if(item.name=='删除帖子'){
            this.DeletePost();
            // this.$toast('删除成功');
        }else if(item.name=='查看详情'){
            this.lookDetail();
        }
    },
    //删除帖子定义方法
    DeletePost(){
        // console.log(this.item.postId);
        deletePost(this.item.postId)
        .then((res)=>{
          this.$toast('删除成功');
           // 接口调用完成后强制刷新页面
    location.reload();
            // console.log('删除返回响应值',res);
        })
    },
    //查看详情
    lookDetail() {
      const param1 = this.item.postId; 
      const param2 = this.userInfo.userId; 
    //   console.log("传递来的参数",param1,param2);
      this.$router.push({
        name: 'pinglun',
        params: {
          param1: param1,
          param2: param2
        }
      });
    }

}
}
</script>

<style lang="less" scoped>

.artitem{
    display: flex;
    flex-direction: column;
    hr{
        
        width: 90%;
        margin-top: 10px;
        margin-left: 20px;
    }
 }

 .middle{
    width: 100%;
    h2{
       margin-left: 35px;
       margin-top: 15px;
       width: 50%;
    }
    
    p{
        margin-left: 255px;
        font-size: 14px;
    }
    span{
        display: inline-block;
        width: 150px;
        margin-left: 35px;
        font-size: 15px;
        position: relative;
        top: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
 }
 .van-icon-ellipsis{
    position: relative;
    left: 90%;
 }
 .van-action-sheet__item{
    margin-left: -12px;
 }

</style>